<template>
  <div id="app">
    <el-popover
      ref="popover"
      placement="bottom"
      width="800"
      trigger="click"
      v-model="visible2">
      <el-row style="margin-top:15px">
        <el-col :span="24">
          <span style="font-size:18px">NCE存量经营 V2R18990389339383930 合作委托开发项目</span> 
          <el-button type="primary" icon="el-icon-setting" class="circle_btn"></el-button>
        </el-col>
        
      </el-row>

      <el-row style="margin-top:15px">
        <el-col :span="24">
          <el-button type="primary" plain>项目监控</el-button>
          <el-button type="primary" plain>工作台</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:15px">
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('1-3')">需求跟踪</a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('3-1')">任务管理</a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('3-1')">度量报告</a>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-top:25px">
        <el-col :span="24">
          <span class="menu_title">需求</span>
          <hr style="border:none;border-top:1px dotted rgb(196, 199, 202);"/>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:15px">
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('1-1')">原始需求</a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('1-2')">分析设计</a>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-top:15px">
        <el-col :span="24">
          <span class="menu_title">计划</span>
          <hr style="border:none;border-top:1px dotted rgb(196, 199, 202);"/>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:15px">
        <el-col :span="5">
          <div class="menu_div" style="background:url(/static/icon/plan.png) no-repeat;">  
            <a v-on:click="gotoPage('2-1')">迭代管理</a>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-top:15px">
        <el-col :span="24">
          <span class="menu_title">开发</span>
          <hr style="border:none;border-top:1px dotted rgb(196, 199, 202);"/>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:15px">
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('3-1')">story设计</a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('3-1')">代码检视</a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/plan.png) no-repeat;">  
            <a v-on:click="gotoPage('3-2')">story转测</a>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-top:15px">
        <el-col :span="24">
          <span class="menu_title">测试</span>
          <hr style="border:none;border-top:1px dotted rgb(196, 199, 202);"/>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:15px;margin-bottom:40px">
        <el-col :span="4">
          <div class="menu_div" style="background:url(/static/icon/rm.png) no-repeat;">  
            <a v-on:click="gotoPage('3-1')">story验收</a>
          </div>
        </el-col>
      </el-row>
    </el-popover>
    <el-container>
      <el-header>
        <el-card id="head" class="box-card">
              <div class="grid-content bg-purple" style="padding:9px;background-color:#409EFF;width:50px">
                <el-button type="danger" icon="el-icon-menu" v-popover:popover class="menu_btn">
                </el-button>
              </div>
        </el-card>
      </el-header>
      <el-main style="padding-top:5px;padding-bottom:10px;background-color:#E4E7ED"
               v-bind:style="{height: dynHeight}">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>



<script>
export default {
	created(){
    this.dynHeight=document.documentElement.clientHeight-60+"px";
      //初始化需求树
      // this.$router.push({ name: 'work'});
  },
  data() {
      return {
        activeIndex : '1',
        visible2: false,
        backDisplay:'none',
        moduleName:'项目监控'
      };
  },
  methods: {
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    },
    gotoPage(key){
      console.log(key);
      this.visible2 = false;
      if(key == '1-1'){
        this.$router.push({ name: '/smartdev/originalRmList'});
        this.moduleName = '原始需求';
      } else if(key == '1-2'){
        this.$router.push({ name: '/smartdev/rmmgr'});
      }
      else if(key == '2-1'){
        this.$router.push({ name: '/smartdev/iterationmgr'});
      }
    },
    toshowBack(backDisplay) {
        this.backDisplay = backDisplay;
    }
  }
}
</script>

<style>
#app {
	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
	font-weight: 400;
}
.el-header{
	padding:0px;
}

.el-main{
	padding:0px;
}
body{
	margin:0px;
	overflow-y:hidden;
  overflow-x:hidden;
	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
	font-weight: 400;
}

#head .el-card__body{
  padding:0px;
}

#app a{
  cursor:pointer;
}

.menu_title{
  font-size:12px;
  color: #929494f7;
}

.menu_div a{
  font-size:14px;
  cursor:pointer;
}
.menu_div{
  padding-left:22px;
}

.menu_btn{
	border-radius: 50%;
	padding: 12px;
}

.circle_btn{
	border-radius: 50%;
	padding: 6px;
}

.my_panel{
	overflow-x: hidden;
	overflow-y: auto;
}

.top_tools_bar{
  position: absolute;
  left: 80px;
  top: 10px;
  width:100%;
}

.el-card{
  border-radius: 0px;
  border: 1px solid #4c263126;
}

</style>
